/****************FONT-SIZES***********/

@media screen and (max-width:300px) {
    nav{
        padding-right: 3px;
        background-color: brown;
        color: blanchedalmond;
        padding: 0.3px 0px;
        font-size: 90%;
        width:auto;
        position: absolute;
        z-index: 8;
    }
    /***********GHS1ZE & LANDING PAGE*****************/
    #showcase h1{
        font-size: 310%;
        margin-bottom: 4px;
    }
    #showcase p{
        font-size: 130%;
    }
    /********HOME PLARGE**********/
    .plarge{
        font-size: 135%;
        font-weight: bold;
        padding: 0 15px;
    }
    /***********HOME PMED*************/
    .pmed{
        font-size: 120%;
        font-weight: bold;
        padding: 0 10px;
    }#bx8p.pdng.bgGalleria{
        padding: 0;
    }
    /*******HOME HMED*************/
    .hmed{
        font-size: 350%;
   }
   .hlarge{
       font-size: 385%;
   }
   #prdH1{
    color: rgb(39, 3, 3);
    font-size: 292%;
    margin: 0px;
   }
   #servH1{
       font-size: 292%;
       color: blanchedalmond;
   }
   #ghs1ze{
       font-size: 292%;
       margin-bottom: 0;
   }
   #cntctHead h2{
       font-size: 192%;
       margin-bottom: 0px;
   }
}
@media screen and (max-width:501px){
    #nav .menu .ovrlay{/*.menu > div*/
        background: rgb(35,6,0,0.85);/*d.brown*/
        border-radius: 50%;
        width: 200vw;
        height:200vw;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;/*avoid oval*/
        transform: scale(0);
        transition: all 0.4s ease;
    }
}
@media screen and (min-width:501px) and (max-width:599px){
    #nav .menu .ovrlay{/*.menu > div*/
        background: rgb(35,6,0,0.85);/*d.brown*/
        border-radius: 50%;
        width: 200vw;
        height:200vw;
        display: flex;
        align-items: start;
        justify-content: center;
        flex: none;/*avoid oval*/
        transform: scale(0);
        transition: all 0.4s ease;
    }
}
@media screen and (max-width:600px){/* MOBILE */
    #pbx1{
        margin: 8px 8px 0 8px;
    }

        /*-------show menu-------*/
    /* #nav .menu > .menu-btn:checked{
        visibility: visible; 
    }*/#nav .menu > .menu-btn:checked ~ .ovrlay{
        visibility: visible;
        transform: scale(1);
        transition-duration: 0.75s;
    }#nav .menu > .menu-btn:checked ~ .ovrlay > div{
        visibility: visible;
        opacity: 1;
        transition: opacity 0.4s ease;
    }#nav .menu > .menu-btn:checked ~ .ovrlay > div > .menu-items{
        visibility: visible;
    }#nav .menu > .menu-btn:checked ~ .ovrlay > div > .menu-items > li{
        visibility: visible;
    }#nav .menu > .menu-btn:checked ~ .ovrlay > div > .menu-items > li > a{
        visibility: visible;
    }#nav{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }#nav .menu{
        /* NB!!!!!
        plan:
        float: left;
        opacity test */
        position: fixed;
        top: 0px;
        right: 0px; 
        width: 100%;
        overflow: hidden;
        visibility: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }#nav .menu > .ovrlay > div{
        text-align: center;
        max-width: 90vw;
        max-height: 100vh;
        opacity: 0;
        transition: opacity 0.4s ease;
    }#nav .menu > .ovrlay > div > .menu-items{
        padding: 0;
    }#nav .menu > .ovrlay > div > .menu-items > li{
        list-style: none;
        color: blanchedalmond;
        font-size: 1.5rem;
        padding: 1rem;
    }#nav .menu > .ovrlay > div > .menu-items > li > a{
        color: blanchedalmond;  
        text-decoration: none;
        transition: color 0.4s ease;
    }
    /*-------HAMBURGER MENU--------*/

    /*-----hamburger button----*/
    /*container for span elements*/
    #nav .menu-icon{/*hambuurger*/
        background: rgb(35,6,0);/*d.brown*/
        visibility: initial;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
        width: 50px;
        height: 50px;
        padding: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0 10px 10px 0;
    }#nav .menu-icon .nav-icon{/*hamburger div*/
        position: relative;
        height: 3px;
        width: 100%;
        background: blanchedalmond;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.4s ease;
    }#nav .menu-icon .nav-icon::before,
    #nav .menu-icon .nav-icon::after{
        content: "";
        position: absolute;
        z-index: 10;
        height: 3px;
        width: 100%;
        top: -10px;
        background: inherit;
    }#nav .menu-icon .nav-icon::after{
        top: 10px;
    }#nav .menu-btn{/*toggler*/
        position: absolute;
        top: 0;
        left: 0;
        z-index: 11;
        cursor: pointer;
        width: 50px;
        height: 50px;
        opacity: 0;
    }
    /*toggler animate*/
    #nav .menu-btn:checked + .menu-icon > .nav-icon{
        transform: rotate(135deg);
    }
    /*turn lines into X*/
    #nav .menu-btn:checked + .menu-icon > .nav-icon::before,
    #nav .menu-btn:checked + .menu-icon > .nav-icon::after{
        top: 0;
        transform: rotate(90deg); 
    } 
    /*rotate on hover when checked*/
    #nav .menu-btn:checked:hover + .menu-icon > .nav-icon{
        transform: rotate(225deg);
    }
    
}
@media screen and (min-width:301px) and (max-width:500px) {
    nav{
        padding-right: 3px;
        background-color: brown;
        color: blanchedalmond;
        padding: 0.3px 0px;
        font-size: 110%;
        width:auto;
        position: absolute;
        z-index: 8;
    }
    /***********GHS1ZE & LANDING PAGE*****************/
    #showcase h1{
        font-size: 450%;
        margin-bottom: 4px;
    }
    #showcase p{
        font-size: 220%;
    }
    #ghs1ze{
        font-size: 350%;
        margin: 0px;
    }
    /*#subtitle -> subtitle text for Galleria card*/
    #subtitle{
        margin-bottom: 4px;
        padding-bottom: 14px;
        font-size: 140%;
    }
    .plarge{
        font-size: 148%;
        font-weight: bold;
        padding: 0 15px;
    }
    /***********HOME PMED********************/
    .pmed{
        font-size: 155%;
        font-weight: bold;
        padding: 0 10px;
    }#bx8p.pdng.bgGalleria{
        padding: 0;
    }
    /**************HOME HMED****************/
    .hmed{
        font-size: 450%;
   }
   .hlarge{
       font-size: 510%;
   }
   .plarge{
       font-size: 165%;
   }
   #prdH1{
        color: rgb(39, 3, 3);
        font-size: 342%;
        margin: 0px;
   }
   #servH1{
        font-size: 372%;
        color: blanchedalmond;
    }
    #cntctHead h2{
        font-size: 302%;
        margin-bottom: 0px;
    }
}
@media screen and (min-width:601px){/* TAB/LAPTOP/PC */
    #nav .menu{
        background: rgb(35,6,0);/*d.brown*/
        padding-right: 6%;
        display: flex;
        position: fixed;
        top: 0px;
        right: 0px;
        width: 100%;
        height: 12%;
        align-items: center;
        justify-content: flex-end;
    }#nav .menu > .ovrlay > div > .menu-items{
        padding: 0;
        display: flex;
        flex-direction: row;
    }#nav .menu > .ovrlay > div > .menu-items > li{
        list-style: none;
        color: blanchedalmond;
        font-size: 1.5rem;
        padding: 1.4rem;
    }#nav .menu > .ovrlay > div > .menu-items > li > a{
        color: blanchedalmond;  
        text-decoration: none;
        transition: color 0.4s ease;
    }
    #contacts{
        display: flex;
        flex-direction: row;
        justify-content: space-around;
    }
    /* #servBlk4{
        display: flex;     
        background: blanchedalmond;
    }#furnSect p{
        color: rgb(39, 3, 3);
        font-size: 342%;
        text-align: center;
    }#furnSect{
        display: flex;
        flex-direction: column;
    }#imgSectFurn{
        display: flex;
        flex-direction: row;
        justify-content: space-around;
    }  */
}
   @media screen and (min-width:501px) and (max-width:720px) {
    nav{
        padding-right: 3px;
        background-color: brown;
        color: blanchedalmond;
        padding: 0.3px 0px;
        font-size: 150%;
        width:auto;
        position: absolute;
        z-index: 8;
    }
    #showcase h1{
        font-size: 450%;
        margin-bottom: 4px;
    }
    #showcase p{
        font-size: 160%;
    }

    .plarge{
        font-size: 228%;
        font-weight: bold;
        padding: 0 15px;
    }
    /***********HOME PMED********************/
    .pmed{
        font-size: 245%;
        font-weight: bold;
        padding: 0 10px;
    }#bx8p.pdng.bgGalleria{
        padding: 0;
    }
    /**************HOME HMED****************/
    .hmed{
        font-size: 650%;
   }
   .hlarge{
       font-size: 722%;
   }
   #prdH1{
        color: rgb(39, 3, 3);
        font-size: 500%;
        margin: 0px;
   }
   #servH1{
        color: blanchedalmond;
        font-size: 480%;
        margin: 0px;
    }
   #servCon{/*inner 2nd flexbox container*/
        display: flex;
        flex-direction: column;
        justify-content: space-around;
   }#ghs1ze{
    font-size: 430%;
    margin: 0px;
   } #subtitle{
    margin-bottom: 4px;
    padding-bottom: 14px;
    font-size: 150%;
   }#cntctHead h2{
        font-size: 282%;
        margin-bottom: 0px;
   }   
}   

@media screen and (min-width:721px) and (max-width:1268px) {
    .container{
        display: grid;
        /* grid-template-columns is 
        neccesary  for columns to
        appear*/
        grid-template-columns: repeat(3, 1fr);
    }
    
    /********HOME PLARGE**********/
    .plarge{
        font-size: 235%;
        font-weight: bold;
        padding: 0 15px;
    }
    /***********HOME PMED*************/
    .pmed{
        font-size: 220%;
        font-weight: bold;
        padding: 0 10px;
    }
    /*******HOME HMED*************/
    .hmed{
        font-size: 80px;
   }
   .hlarge{
       font-size: 680%;
   }
    nav{
        padding-right: 3px;
        background-color: brown;
        color: blanchedalmond;
        padding: 0.3px 0px;
        font-size: 185%;
        width:auto;
        position: absolute;
        z-index: 8;
    }
    /*--------showcase heading---------------*/
    #showcase h1{
        font-size: 620%;
        margin-bottom: 4px;
    }
    #showcase p{
        font-size: 40px;
    }
       

    /*------service flexbox media query---------*/
    #prdH1{
        color: rgb(39, 3, 3);
        font-size: 480%;
        margin: 0px;
    }
    
    #servH1{
        color: blanchedalmond;
        font-size: 480%;
        margin: 0px;
    }
    #ghs1ze{
        font-size: 450%;
        margin: 0px;
    }
    #cntctHead h2{
        font-size: 292%;
        margin-bottom: 0px;
    }
    /*#subtitle -> subtitle text for Galleria card*/
    #subtitle{
        margin-bottom: 4px;
        padding-bottom: 14px;
        font-size: 240%;
    }
    /*--------product flexbox media query--------*/
    #prdCon{
        /* justify-content: center; */
        align-items: center;
        display: flex;
        flex-direction: column-reverse;
        gap: 20px;
        border-radius: 20px;
        padding: 50px;
    }
    #pbx8{/*pics only flexbox*/
        display: flex;
        flex-direction: row;
        /* margin-top: 50px; */
    }

}
@media screen and (min-width:1269px){
    nav{
        padding-right: 3px;
        background-color: brown;
        color: blanchedalmond;
        padding: 0.3px 0px;
        font-size: 185%;
        width:auto;
        position: absolute;
        z-index: 8;
    }
    /*--------showcase heading---------------*/
    #showcase h1{
        font-size: 690%;
        margin-bottom: 4px;
    }
    #showcase p{
        font-size: 50px;
    }
       

    /*------service flexbox media query---------*/
    #prdH1{
        color: rgb(39, 3, 3);
        font-size: 480%;
        margin: 0px;
    }
    
    #servH1{
        color: blanchedalmond;
        font-size: 480%;
        margin: 0px;
    }
    #ghs1ze{
        font-size: 450%;
        margin: 0px;
    }
    #cntctHead h2{
        font-size: 302%;
        margin-bottom: 0px;
    }
    /*#subtitle -> subtitle text for Galleria card*/
    #subtitle{
        margin-bottom: 4px;
        padding-bottom: 14px;
        font-size: 240%;
    }
    /*-------home grid media query------------*/
    .container{
        display: grid;
        /* grid-template-columns is 
        neccesary  for columns to
        appear*/
        grid-template-columns: repeat(3, 1fr);
    }
    /********HOME PLARGE**********/
    .plarge{
        font-size: 265%;
        font-weight: bold;
        padding: 0 15px;
    }
    /***********HOME PMED*************/
    .pmed{
        font-size: 220%;
        font-weight: bold;
        padding: 0 10px;
    }
    /*******HOME HMED*************/
    .hmed{
        font-size: 680%;
   }
   .hlarge{
       font-size: 980%;
   }
    #prdCon{
        /* justify-content: center; */
        align-items: center;
        display: flex;
        flex-direction: column-reverse;
        gap: 20px;
        border-radius: 20px;
        padding: 50px;
    }#pbx8{/*pics only flexbox*/
        display: flex;
        flex-direction: row;
        /* margin-top: 50px; */
    }
    #servCon{/*inner 2nd flexbox container*/
        display: flex;
        justify-content: space-around;
    }
} 
@media screen and (min-width: 1330px){
    nav{
        padding-right: 3px;
        background-color: brown;
        color: blanchedalmond;
        padding: 0.3px 0px;
        font-size: 120%;
        width:auto;
        position: absolute;
        z-index: 8;
    }

    /*--------showcase heading---------------*/
    #showcase h1{
        font-size: 780%;
        margin-bottom: 4px;
    }
    #showcase p{
        font-size: 35px;
    }
     /********HOME PLARGE**********/
     .plarge{
        font-size: 235%;
        font-weight: bold;
        padding: 0 15px;
    }
    /***********HOME PMED*************/
    .pmed{
        font-size: 220%;
        font-weight: bold;
        padding: 0 10px;
    }
    /*******HOME HMED*************/
    .hmed{
        font-size: 680%;
   }
   .hlarge{
       font-size: 980%;
   }
   #prdH1{
        color: rgb(39, 3, 3);
        font-size: 480%;
        margin: 0px;
    }

    #servH1{
        color: blanchedalmond;
        font-size: 480%;
        margin: 0px;
    }
    #ghs1ze{
        font-size: 450%;
        margin: 0px;
    }
    #cntctHead h2{
        font-size: 292%;
        margin-bottom: 0px;
    }
    /*#subtitle -> subtitle text for Galleria card*/
    #subtitle{
        margin-bottom: 4px;
        padding-bottom: 14px;
        font-size: 240%;
    }      
}

/****************END OF: FONT-SIZES***********/

/*-----------GLOBAL VAR--------*/

body{
    font-family: 'Aladin', cursive;
    background-color:rgb(190, 171, 133);
    
}
a{
    text-decoration: none;
    /* color: blanchedalmond; */
}
li{
    list-style-type: none;
}
.clr{
    clear: both;
}
/* global class for headers*/
.hder{
    background-color: brown;
    color: blanchedalmond;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;/*vertical centre*/
    align-items: center;/*horizontal centre*/
    text-align: center;/*text ALWAYS centered*/
}
article{
    /*background-color: khaki;*/
    background-color: khaki;
}


#nav .menu-btn{/*toggler*/
    opacity: 0;
}


main {
    display: inline;
    background-color: brown;
}
footer{
    text-align: center;
}footer a{
    color: brown;
}
/*-----------END OF GLOBAL VAR--------*/

/* #showcase is for header for landing page*/
#showcase{
    height: 100vh;
}


/* -----end of #showcase ------*/

/*-------------------GALLERIA-------------------*/








.card{
    box-shadow: 8px 8px 8px 0px;
    border-radius: 20px;
    width: 330px; /*applies to BOTH so it must be here*/
    height: 410px;
    text-align: center;
    position: relative;
    color: maroon;
} 

/*adjust size of pic*/
.fcard{
    width: 230px;
    height: 230px;
    background-size: cover;
    box-shadow: 5px 5px 5px 5px blanchedalmond;
    border-radius: 8px;
    margin: 16px 20px;
}
/*making a card for each pic so that the the pic fits the card*/
figure#Aloe.fcard{
    background-image: url("images/Aloe.jpg");
}
figure#Garden1.fcard{
    background-image: url("images/Garden1.jpg");
}
figure#Garden2.fcard{
    background-image: url("images/Garden2.jpg");
}
figure#MaYellow.fcard{
    background-image: url("images/MaYellow.jpg");
}
figure#mugflower1.fcard{
    background-image: url("images/mugflower1.jpg");
}
figure#OrangeBerries1.fcard{
    background-image: url("images/OrangeBerries1.jpg");
}
figure#OrangeBerries2.fcard{
    background-image: url("images/OrangeBerries2.jpg");
}
figure#PsalmTree.fcard{
    background-image: url("images/PsalmTree.jpg");
}
figure#Purple.fcard{
    background-image: url("images/Purple.jpg");
}
figure#rose1.fcard{
    background-image: url("images/rose1.jpg");
}
figure#Snowy1.fcard{
    background-image: url("images/Snowy1.jpg");
}
figure#Snowy2.fcard{
    background-image: url("images/Snowy2.jpg");
}
figure#Stone.fcard{
    background-image: url("images/Stone.jpg");
}
figure#GalleryCard.fcard{
    background-image: url("images/GalleryCard.jpg");
}
figure#Nkcenkce.fcard{
    background-image: url("images/Nkcenkce.jpg");
}
figure#Table1.fcard{
    background-image: url("images/Table1.jpg");
}
figure#lsu.fcard{
    background-image: url("images/lsu.jpg");
}
figure#lsuBunch.fcard{
    background-image: url("images/lsuBunch.jpg");
}
figure#lily.fcard{
    background-image: url("images/lily.jpg");
}
figure#redGreen.fcard{
    background-image: url("images/redGreen.jpg");
}
figure#gRose.fcard{
    background-image: url("images/gRose.jpg");
}
figure#ro3es.fcard{
    background-image: url("images/ro3es.jpg");
}
figure#twinRose.fcard{
    background-image: url("images/twinRose.jpg");
}
figure#sheetRose.fcard{
    background-image: url("images/sheetRose.jpg");
}
figure#whiteVase2.fcard{
    background-image: url("images/whiteVase2.jpg");
}
figure#purpAutumn1.fcard{
    background-image: url("images/purpAutumn1.jpg");
}
figure#purpAutumn2.fcard{
    background-image: url("images/purpAutumn2.jpg");
}
figure#passege1.fcard{
    background-image: url("images/passege1.jpg");
}
figure#passege2.fcard{
    background-image: url("images/passege2.jpg");
}

/*PICS FOR 'LogAlbum'; 'TableAlbum & 'GFurn'*/

figure#LogAbove.fcard{
    background-image: url("images/LogAbove.jpg");
}
figure#LogFront.fcard{
    background-image: url("images/LogFront.jpg");
}
figure#LogFrontAbove.fcard{
    background-image: url("images/LogFrontAbove.jpg");
}
figure#LogSide.fcard{
    background-image: url("images/LogSide.jpg");
}


figure#Table2.fcard{
    background-image: url("images/Table2.jpg");
}
figure#TableHole.fcard{
    background-image: url("images/TableHole.jpg");
}
figure#TableHole2.fcard{
    background-image: url("images/TableHole2.jpg");
}
figure#TableLeftAngle.fcard{
    background-image: url("images/TableLeftAngle.jpg");
}
figure#TableRightAngle.fcard{
    background-image: url("images/TableRightAngle.jpg");
}

figure#plantBench1.fcard{
    background-image: url("images/plantBench1.jpg");
}
figure#plantBench2.fcard{
    background-image: url("images/plantBench2.jpg");
}
figure#plantBench3.fcard{
    background-image: url("images/plantBench3.jpg");
}
figure#plantBench4.fcard{
    background-image: url("images/plantBench4.jpg");
}

/*---------------HOME SECTION-----------------*/

/*---------------FLEXBOX AND POSITION----------------*/

article.card h3{
    /*background-color:floralwhite;*/
    background-color: khaki;
    background-size: cover;
    
}

article.card p{
    background-color:floralwhite;
}    
article#Products{

    /*position:relative; opted to use 'position' because I 
    noticed that the elements within article#Products were 
    just shifted out of place around article#Services - 
    maybe something to do with something I noticed when 
    highlighting article#Services in Developer Tools; 
    - it was occupying space meant for article#Products.
    - my theory  is that this is because a#P was floated.
    - I read that for 'position: absolute'... 
       -> "SPACE IS NOT LEFT for the moved element
           AS IT IS NO LONGER IN THE NORMAL FLOW". 
    - my theory seems to have worked as a#Plooks fine now.
    */

    /*float: left
    box-sizing: border-box;*/
    /* width: 20%; */
    margin: 20px;
    /* flex: 1; */
    /* order: 2; */
}


article#Services{
    /*float: left;
    box-sizing: border-box;*/
    /* width: 20%; */
    margin: 20px;
    /* flex: 1; */
    /* order: 1; */
}

article#Galleria{
    background-image:url("images/GalleryCard.jpg");
    background-size: cover;
    color: khaki;
    text-align: center;
    font-size: 55px;
    position: relative;
    margin-top: 20px;
    margin-left: 20px;
    /* width: 33%;
    margin: 10px 20px 10px 100px; */
    /*float: right;
    width: 33.3%;
    box-sizing: border-box;*/
    /* flex: 5; */
    /* order: 3; */
}
#GalleriaH1{
    position: absolute;
    left: 48px;
}




/*------------------------GRID w/IMAGE------------------------*/


.container div{
    z-index: 1;
    cursor: pointer;
    border-radius: 10px;
    height: 210px;

    background-size: cover;
    /*for pic to span and not repaet*/
    background-attachment: fixed;

    /*flexbox*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
   
}   


.hmed a{
    color: rgb(39, 3, 3);
}
.hlarge a{
    
    color: blanchedalmond;
}


section#Home{
    margin-top: 20px;
    padding: 10;
    background: rgb(39, 3, 3);
    border-radius: 10px;
}

/*grid-gap is obsolete ao opted for margin*/
.pdng{
    margin: 5px;
}
.bgProducts{
    background: url("images/Nkcenkce.jpg");
    background-position: top;
    color: rgb(39, 3, 3);
}
.bgServices{
    background: url("images/mugstone.jpg");
    background-position: top left;
    color: blanchedalmond;
}.bg4Txt{
    background: rgb(39, 3, 3);
    border-radius: 30px;
    /* opacity: 0.7; */
}
.bgGalleria{
    background-image:url("images/Garden1.jpg");
    background-position: top right;
    color: rgb(39, 3, 3);
    
}

#bx1{
    order: 1;
}
#bx2{
    order: 2;

    /*attempt to fit text*/
    /* display: inline-block; */
}
#bx3{
    order: 3;
}
#bx4{
    order: 4;
}
#bx5{
    order: 5;
}
#bx6{
    order: 6;
}
#bx7{
    order: 7;
}
#bx8p{
    order: 9;
    padding-left: 160px;
}
#bx9{
    order: 8;
}
.container div:nth-of-type(2){
    grid-column: 2/4;
}
.container div:nth-of-type(4){
    grid-column: 2/4;
}
/*NB!!!
SINCE I CHANGED THE ORDER AND MADE bx8 THE LAST
BOX, I THEN HAD TO CHANGE FROM nth-type(9)
to nth-type(8)*/
.container div:nth-of-type(8){
    grid-column: 2/4;
}

.lhvr:hover, .dhvr:hover{
    /*opacity-> see-through, transparent effect
    opacity: 0.7;*/
    /*transform: scale(0.98)->
    changes size of element */
    transform: scale(0.98);
     /*smooth transition between grids
    we cav -> transition: all 0.5 ease-in*/
    transition: all 0.5s ease-in;
}
.lhvr a, .dhvr a{
    color: inherit;
}
.lhvr a:hover{
    color: rgb(145, 42, 145);
    
    
}.dhvr a:hover{
    color: rgb(224, 93, 224);
    
    
}
/*---------------HOME SECTION-----------------*/

/*-----------------------END OF:GRID w/IMAGE----------------------*/


/*--------------------------PRODUCTS-----------------------------------*/
#prd{
    background: none;
    border-color: rgb(39, 3, 3);
    border-radius: 20px;
    border-style: solid;
    margin: 20px 0;
}#pbx1{
    border-radius: 20px;
}/*#pbx3{
    height: 335px;

} */
#pbx2{
    text-align: center;/*align "PRODUCTS"*/
}
#pbx4{/*heading + pics*/
    display: flex;
    flex-direction: column;
    align-items: center;
}.prdbH{
    color: rgb(39, 3, 3);
    text-align: center;
}
.prdtxt{
    border-color: rgb(39, 3, 3);
    border-radius: 20px;
    border-style: solid;
    color: rgb(39, 3, 3);   
}
#prdP{
    font-size: 23px;
    font-weight: bold;
    padding: 0 10px;
    text-align: center;
}
.prdItems{
    width: 230px;
    height: 230px;
    background-size: cover;
    border-radius: 50%;
    border-style: solid;
    border-color: rgb(39, 3, 3);
}


#bx8{
    padding: 0;/*had to remove all padding*/
} 
/*--------------------END OF:PRODUCTS-----------------------------------*/


/*--------------------------SERVICES-----------------------------------*/

#servc{
    display: flex;
    align-items: center;
    flex-direction: column;
    background: rgb(39, 3, 3);
    border-radius: 20px;
    margin: 20px 0;
}

.servH2{
    color: blanchedalmond;
}
.pServ{
    color: blanchedalmond;
}
fieldset{
    border-color: blanchedalmond;
    border-width: 3px;
    border-radius: 7px;
    /* background-size: cover; */
}/* #servBlk1{
    background-image: url("images/Stone.jpg");
}#servBlk2{
    background-image: url("images/GardenGate.jpg");
}#servBlk3{
    background-image: url("images/stonepath2.jpg");
} */
legend{
    background-color: rgb(39, 3, 3);
    border-radius: 7px;
    border-style: solid;
    border-color: blanchedalmond;
}
/*-------------------------END OF:SERVICES-----------------------------*/

/*---------------GALLERY SECTION---------------*/
#BXgalpics{
    margin-top: 20px;
    background: brown;
    border-radius: 20px;
    padding: 20px 0;
}
#galpics{
    align-items: center;
    display: grid;
    /* grid-template-columns is 
    neccesary  for columns to
    appear*/
    /* grid-template-columns: repeat(4, 1fr); */
    grid-template-columns: repeat(auto-fill,
    minmax(235px, 1fr));
}
.Gall{
    float: left;
    width: 550px;
}

/*-------FOOTER------*/
#subtitle a{
    color: rgb(39, 3, 3);
}
#subtitle a:hover{
    color: rgb(145, 42, 145);
}
#contacts li{
    display: list-item;
}
/*-------FOOTER------*/